import { ScrollView, Image, Text } from "@tarojs/components";
import { useEffect, useState } from "react";
import { request } from "../../utils";
import { apis } from "../../constants";
import Taro from '@tarojs/taro';
import "./index.scss";

interface imgList {
  imageUrl: string;
}

interface dateList {
  data: any;
}

export default function Picture() {
  const [list, setList] = useState<Array<imgList>>([]);
  const getPic = async () => {
    const data: dateList = await request({
      method: "GET",
      url: apis.girlImg,
      data: {}
    });
    setList([...list, ...data.data]);
  };

  useEffect(() => {
    getPic();
  }, []);

  const scrolltest = () => {
    getPic();
  };

  const imgYu=(current:string,urls:Array<string>)=>{
    Taro.previewImage({
        current,
        urls
    })
}
  return <ScrollView className='test' scrollY onScrollToLower={scrolltest}>
    {list.length ? (
      list.map((one, index) => (
        <Image src={one.imageUrl} key={index} style={{ width: "100%" }} onClick={()=>imgYu(one.imageUrl,list.map(val=>val.imageUrl))} />
      ))
    ) : (
      <Text>暂无数据</Text>
    )}
  </ScrollView>
}
